<template>
  <div class="search_modules">
    <headerNav />
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>企业政策匹配</span>
    </div>
    <div class="search_border">
      <div class="mindWidth search_max">
        <div class="seach_centent">
          <div class="search_bar">
            <input
              type="text"
              placeholder="请输入你想要查询的企业名称"
              v-model="searchKey"
              @input="changeInput"
              @focus="getList"
              @blur="leave"
            />
            <button @click="toPolicy(searchKey)">
              <i class="el-icon-search"></i> 匹配
            </button>
          </div>

          <div class="noData" v-show="isShow">
            <ul>
              <li
                class="changeHanld"
                v-for="(item, index) in inputList"
                :key="index"
                v-show="inputList.length > 0"
                @click="toPolicy(item.companyName)"
              >
                <span v-html="item.companyName"></span>
              </li>
              <li v-show="searchKey != '' && isShow2 && !inputList.length">查不到相关的公司</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <navigation />
    <footerNav />
  </div>
</template>

<script>
import paging from "../../components/PageQuery.vue";
import { getCompany } from "../../api/home.js";
export default {
  components: {
    paging
  },
  data() {
    return {
      currentIndex: 0,
      searchKey: "",
      hotSearchList: [], // 关键字列表
      company: [], // 数据列表
      pageNo: 1,
      totalVal: 0,
      inputList: [], // 监听表单中的值
      isShow: false, // 显示模糊匹配框
      isShow2: false, // 是否显示
      showList: true // 搜索框焦点
    };
  },
  methods: {
    // 搜索框是否有焦点，判断模糊匹配列表是否展示
    getList() {
      this.showList = true;
    },
    leave() {
      this.showList = false;
    },
    // 点击搜索按钮
    toPolicy(name) {
      // 正则匹配html标签
      let params = name.replace(/<\/?.+?>/g, ""); // 去除html标签
      window.open(`/companyPlolicy?name=${params}`, "_blank");
    },
    // 监听input的值
    async changeInput() {
      this.isShow = false; // 显示模糊匹配框
      if (this.searchKey != "") {
        let params = {
          companyName: this.searchKey,
          pageIndex: this.pageNo,
          area: "",
          city: "",
          companyId: "",
          endLat: 0,
          endLng: 0,
          pageSize: 10,
          province: "",
          startLat: 0,
          startLng: 0
        };
        let res = await getCompany(params);
        if (res.retCode == 0) {
          this.changeText(res.data.content, "companyName", this.searchKey);
          this.inputList = res.data.content;
          this.isShow = true;
        } else {
          this.isShow2 = true;
        }
      }
    },
    loseFocus() {
      this.isShow = false;
    },
    // 关键字标明红色
    changeText(result, key, val) {
      if (val != "") {
        let arr = val.split("");
        let old = [];
        arr.forEach(el => {
          old.push(el);
        });
        let arrText = [];
        result.forEach((el, index) => {
          el[key].split("").forEach(el1 => {
            arr.forEach(val => {
              if (val.indexOf(el1) !== -1) {
                el[key] = el[key].replace(
                  new RegExp(el1, "g"),
                  `<em style=color:red;font-style:normal;>${el1}</em>`
                );
              }
            });
          });
        });
        return result;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;
  // text-align: center;
  // position: relative;
  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;
    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
.departmentInside_bottom {
  margin-top: 40px;
  margin-bottom: 60px;
  padding: 0px 20px;
  text-align: right;
}

.search_modules {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }

  .search_border {
    min-height: 540px;
    display: flex;
    align-items: center;

    flex-direction: column;
    background-color: #fff;

    .search_max {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      margin-top: 120px;
      .seach_centent {
        position: relative;
        display: flex;
        justify-content: center;
        width: 790px;
        flex-direction: column;
        height: 100%;

        .search_bar {
          position: relative;
          width: 790px;
          display: flex;
          align-items: center;

          input {
            height: 60px;
            width: 670px;
            border: 1px solid #44a2ff;
            border-radius: 4px 0 0 4px;
            font-size: 20px;
            padding-left: 10px;
            color: #000;

            &::placeholder {
              color: #ddd;
              font-size: 20px;
            }
          }

          button {
            border-radius: 0px 4px 4px 0;
            height: 60px;
            width: 120px;
            font-size: 18px;
            color: #fff;

            i {
              font-size: 18px;
              color: #fff;
            }
          }
        }

        .search_hotname {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 20px;

          p {
            font-size: 16px;
            color: #000;
            margin-right: 10px;
          }

          span {
            color: #ccc;
            margin: 0 10px;
            font-size: 16px;
          }
        }

        .noData {
          position: absolute;
          background-color: #fff;
          left: 0;
          width: 670px;
          top: 100px;
          overflow: hidden;
          z-index: 99;
          max-height: 200px;

          ul {
            padding-left: 20px;

            li {
              height: 50px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid rgba(154, 154, 154, 0.2);
            }
          }
        }
      }
    }
  }
}
</style>
